<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
</style>
</head>
<body>
	<div class="comFlowBox">
		<div class="comGodList" id="flow_html">
			<div class="grid-sizer"></div>

		</div>
	</div>

	<script type="text/x-dot-template" id="flow_tpl">
		{{ for(var i in it){ }}
		<div class="item" data-id="{{= it[i].goods_id}}" tapmode onClick="openGoodsDetail({{= it[i].goods_id}});">
			<div class="inner">
				<div class="photo"><img src="{{= it[i].goods_cover }}" alt=""></div>
				<div class="textBox">
					<div class="title aui-flex-col aui-flex-middle">
						<div class="aui-ellipsis-2">{{= it[i].goods_name }}</div>
					</div>
					<div class="aui-flex-col aui-flex-middle priceBox">
						<div class="nowPrice">¥{{= it[i].goods_sale_price }}</div>
						<div class="delPrice">¥<del>{{= it[i].goods_market_price }}</del></div>
						<div class="flex-auto"></div>
						<div class="aui-font-size-10 color-666">月销量：{{= it[i].goods_month_sales }}</div>
					</div>
				</div>
			</div>
		</div>
		{{ } }}
	</script>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../../script/masonry.pkgd.min.js"></script>
<script type="text/javascript">
var gridDom = '#flow_html';
var grid;
var isLoading = false;
var loadFlag = true;
var pageSize = 50;
var currentPage = 1;
var godType = 1;
var postData = {
	pageNo: currentPage,
	pageSize: pageSize,
	type: godType
};
apiready = function() {
	api.parseTapmode();

	if(api.pageParam.godType == 'gift'){
		godType = 1;
	}
	if(api.pageParam.godType == 'self'){
		godType = 2;
	}
	postData.type = godType;
	getData()

	// 监听到达底部
	api.addEventListener({
		name: 'scrolltobottom',
		extra: {
			threshold: 0
		}
	}, function(ret, err) {
		if(isLoading)return;
		if(loadFlag){
			getData();
		}
	});
};
//调用瀑布流
grid = new Masonry(gridDom, {
	columnWidth: '.grid-sizer',
	itemSelector: '.item',
	percentPosition: true
});
imagesLoaded(gridDom, function() {
	grid.layout();
});
//瀑布流
function getFlow(flowData) {
	var tpl = $$('#flow_tpl').html();
	var tempFn = doT.template(tpl);
	var elem = $$(tempFn(flowData));
	if( currentPage==1 ){
		$$('#flow_html').html('<div class="grid-sizer"></div>');
	}
	$$(gridDom).append(elem);
	grid.appended(elem);
	imagesLoaded(gridDom, function() {
		grid.layout();
	});

	api.parseTapmode();
}

function getData(){
	showProgress();
	isLoading = true;
    postData.pageNo = currentPage;
    api.ajax({
        url: BASE_URL + 'App/Mall/goodsLists',
        method: 'post',
        data: {
            values: postData
        }
    },function(ret,err){
        if (ret) {
            if(ret.code == 1 && ret.data.length > 0){
                $$('.noData,.noMoreData').addClass('aui-hide');
                getFlow(ret.data);
                currentPage++;
                api.parseTapmode();
                //如果加载出来的数量 小于 pagesize 说明到底线了
                if(ret.data.length < postData.pageSize){
                    $$('.noMoreData').removeClass('aui-hide');
                    loadFlag = false;
                }
			}else{
				if(currentPage == 1){
                    $$('#flow_html').html('');
                    $$('.noMoreData').addClass('aui-hide');
                    $$('.noData').removeClass('aui-hide');
                }else{
                    $$('.noMoreData').removeClass('aui-hide');
                }
                loadFlag = false;
			}
        }
		isLoading = false;
		hideProgress();
    });
}

</script>
</html>
